import React, { useEffect, useState } from 'react';
import { FieldProps } from '@rjsf/utils';
import { Checkbox, Flex, Input } from 'antd';
type ForDataType = {
  [key: string]: { isChecked: boolean; value: number | string };
};
// 选择器
export const CheckBoxInpArr = ({
  schema,
  uiSchema,
  onChange,
}: FieldProps<ForDataType>) => {
  const formData = schema?.default;
  const width = uiSchema['ui:width'] ?? '50%';
  const gap = uiSchema['ui:gap'] ?? 2;
  const options = (uiSchema['ui:options']?.options as Array<any>) ?? [];
  const [execute, setExecute] = useState<boolean>(false);
  const temp = {};
  options.forEach((item) => {
    temp[item.const] = {
      isChecked: formData?.[item.const]?.isChecked ?? false,
      value: formData?.[item.const]?.value ?? '',
    };
  });
  const [checkboxArr, setCheckboxArr] = useState<ForDataType>(temp);
  const setData = (key: string, childrenKey: 'isChecked' | 'value', value) => {
    setCheckboxArr((state) => ({
      ...state,
      [key]: {
        ...state[key],
        [childrenKey]: value,
      },
    }));
  };

  useEffect(() => {
    if (execute) {
      onChange(checkboxArr);
    }
  }, [checkboxArr]);
  return (
    <>
      <div className='fs'>{schema.title}</div>
      <Flex
        wrap
        gap='small'
        style={{ gap, justifyContent: 'space-between' }}>
        {options.map((item) => {
          return (
            <Flex
              style={{
                width: 'calc(' + width + ' - ' + gap + 'px)',
              }}>
              <div style={{ alignSelf: 'center' }}>
                {item.hasChecked ? (
                  <Checkbox
                    defaultChecked={checkboxArr?.[item.const]?.isChecked}
                    onChange={(e) => {
                      setData(item.const, 'isChecked', e.target.checked);
                    }}>
                    {item.title}
                  </Checkbox>
                ) : (
                  item.title
                )}
              </div>
              <Input
                status={getStatus(
                  item?.pattern,
                  checkboxArr?.[item.const].value,
                )}
                disabled={!checkboxArr?.[item.const].isChecked}
                type={item?.type ?? 'text'}
                value={checkboxArr?.[item.const].value}
                prefix={item?.prefix ?? ''}
                suffix={item?.suffix ?? ''}
                onChange={(e) => {
                  if (!getStatus(item?.pattern, e.target.value)) {
                    setExecute(true);
                  } else {
                    setExecute(false);
                  }
                  setData(item.const, 'value', e.target.value);
                }}></Input>
            </Flex>
          );
        })}
      </Flex>
    </>
  );
};
function getStatus(pattern, value): '' | 'error' {
  console.log('pattern:', pattern, value);
  if (pattern && !pattern.test(value)) {
    return 'error';
  }
  return '';
}
/**
 * @description 自定义组件
 * @param {FieldProps} props
 * @returns {JSX.Element}
 * @example 
 * schema: {
 *  AddShellsFaces: {
      title: 'Add shells/faces to',
      type: 'object',
      default: {
        PID: {
          isChecked: false,
          value: 0,
        },
      },
    },
  }
 * uiSchema: {
    'ui:field': 'checkBoxInpArr',
    'ui:span': [5, 8],
    'ui:options': {
      options: [
          {
            const: 'PID',
            title: 'PID',
            hasChecked: true,
            type: 'number',
            prefix: 'expand level=',
            suffix: 'm',
          },
          {
            const: 'Part',
            title: 'Part',
            type: 'number',
            hasChecked: true,
          },
          {
            const: 'Set',
            title: 'Set',
            type: 'number',
            hasChecked: true,
          },
        ],
    },
 }
 * */
